<template>
  <div class="box">
    <!-- 头部 -->
    <div class="topBar">
      <div class="logo">
        <router-link
          to="/"
          class="tozhu"
        >
          <i class="jingling"></i>
          <span>网易云音乐</span>
        </router-link>

      </div>
      <ul class="thenavul">
        <li>
          <router-link to="/discover">发现音乐</router-link>
        </li>
        <li>
          <router-link to="/my">我的音乐</router-link>
        </li>
        <li>
          <router-link to="/friend">朋友</router-link>
        </li>
        <li>
          <a
            href="https://music.163.com/store/product"
            target="_blank"
          >商城</a>
          <!-- <router-link to="/store/product"></router-link> -->
        </li>
        <li>
          <a
            href="https://music.163.com/st/musician"
            target="_blank"
          >音乐人</a>
          <!-- <router-link to="/st/musician"></router-link> -->
        </li>
        <li>
          <router-link to="/download"><i class="jinglingHot"></i>下载客户端</router-link>
        </li>
      </ul>
      <div class="right">
        <div class="srkuang">
          <input
            type="text"
            placeholder="音乐/视频/电台/用户"
            v-model="usersr"
            @keyup="getImagine"
            @focus="showImagine"
            @keyup.enter="tiaoresult"
          >
          <!-- 有这个就一点击搜索项触发此函数，不起作用 -->
          <!-- @blur="hideImagine" -->
        </div>
        <!-- 搜索框弹出来的联想------------------ -->
        <div class="lstlay">
          <p class="note">
            <a href="#">搜“{{usersr}}” 相关用户</a>
          </p>
          <div class="rap">
            <div
              class="itm"
              v-for="(item,index) in thetot"
              :key="index"
            >
              <h3 class="hd">
                <i class="iconfont icon-yinfu"></i>
                <span v-if="item=='songs'">单曲</span>
                <span v-else-if="item=='artists'">歌手</span>
                <span v-else-if="item=='albums'">专辑</span>
                <span v-else-if="item=='playlists'">歌单</span>
              </h3>
              <ul class="f-cb">
                <li
                  v-for="(it,i) in iagineDate[item]"
                  :key="i"
                  @click.prevent="goDetail(it.id,item)"
                ><a href="#">{{it.name}}</a></li>
              </ul>
            </div>

          </div>
        </div>

        <a
          href="#"
          class="creater"
        >创作者中心</a>
        <!-- 登录按钮 -->
        <div
          class="haslogina"
          v-if="hasLogin"
          @mouseenter="showDia"
          @mouseleave="hideDia"
        >

          <el-badge
            :value="msgInfoDate.newMsgCount"
            class="itemas"
          >
            <el-avatar
              size="medium"
              :src="userInfo.profile.avatarUrl"
            ></el-avatar>
            <!-- <img v-lazy="userInfo.profile.avatarUrl"> -->
          </el-badge>
          <!-- <i class="magcount">{{msgInfoDate.length}}</i> -->
          <!-- 鼠标hover在头像上，出来的窗口 -->
          <div
            class="m-tlist"
            v-show="isShowUDia"
          >
            <ul>
              <li>
                <a
                  href="#"
                  @click.prevent="gouserhome()"
                >
                  <i class="iconfont icon-renwu"></i>
                  <span>我的主页</span>
                </a>
              </li>
              <li>
                <a
                  href="#"
                  @click.prevent="gomsghome()"
                >
                  <i class="iconfont icon-xiaoxi"></i>
                  <span>我的消息</span>
                  <span class="m-topmsg">{{msgInfoDate.newMsgCount}}</span>
                </a>
              </li>
              <li>
                <a
                  href="#"
                  @click.prevent="goMyLevel"
                >
                  <i class="iconfont icon-huizhang"></i>
                  <span>我的等级</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont icon-VIP"></i>
                  <span>VIP会员</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont icon-shezhi"></i>
                  <span>个人设置</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont icon-shiming"></i>
                  <span>实名认证</span>
                </a>
              </li>
              <li>
                <a
                  href="#"
                  @click.prevent="exitLogin"
                >
                  <i class="iconfont icon-tuichu"></i>
                  <span>退出</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <a
          href="#"
          class="login2q"
          @click.prevent="goLoginPage"
          v-else-if="!hasLogin"
        >登录</a>

        <div
          class="login"
          v-show="!hasLogin"
        >
          <div
            class="topBar"
            v-if="!phoneLogin && !register && !emailPa"
          >登录</div>
          <div
            class="topBar"
            v-if="phoneLogin && !register"
          >手机号登录</div>
          <div
            class="topBar"
            v-if="register"
          >手机号注册</div>
          <div
            class="topBar"
            v-if="emailPa"
          >邮箱登录</div>
          <div class="cnt">
            <!-- ----------------------手机扫码登录 -->
            <!-- 扫描二维码页面 -->
            <div
              class="main"
              v-if="waitSaoQr && isQr"
            >
              <div class="phone"></div>
              <div class="right">
                <div class="title">扫码登录</div>
                <div class="qr">
                  <!-- 登录二维码 -->
                  <img
                    :src="baseUrl"
                    class="pic"
                  >
                  <div class="info">
                    <p>二维码已失效</p>
                    <a
                      href="#"
                      @click="goLoginPage"
                    >点击刷新</a>
                  </div>
                </div>
                <p class="txt">使用网易云App扫码登录</p>
              </div>
            </div>
            <!-- 等待手机端确认 -->
            <div
              v-if="waitConfirm && isQr"
              class="phoneConfirm"
            >
              <div class="suc">
                <div class="suc-pic"></div>
                <p class="suc-text">扫描成功</p>
              </div>
              <p class="confirm">请在手机上确认登录</p>
            </div>
            <!----------------------其他方式登录 -->
            <div
              class="other"
              v-if="!isQr && !phoneLogin && !register && !emailPa"
            >
              <div class="n-log2">
                <div class="u-main">
                  <div class="u-plt"></div>
                  <div class="f-mgt10"><a
                      href="#"
                      @click.prevent="goPhoneLogin"
                    >手机号登录</a></div>
                  <div class="f-mgt10"><a
                      href="#"
                      @click.prevent="registerUser2"
                    >注册</a></div>
                </div>
                <div class="u-alt">
                  <ul>
                    <li @click="weChatLogin(1)">
                      <a
                        href="#"
                        class="wechata"
                      ><i class="iconfont "></i>微信登录</a>
                    </li>
                    <li @click="weChatLogin(2)">
                      <a
                        href="#"
                        class="wechata"
                      ><i class="iconfont icon2"></i>QQ登录</a>
                    </li>
                    <li @click="weChatLogin(3)">
                      <a
                        href="#"
                        class="wechata"
                      ><i class="iconfont icon3"></i>微博登录</a>
                    </li>
                    <li @click="emailLogin">
                      <a
                        href="#"
                        class="wechata"
                      > <i class="iconfont icon4"></i>网易邮箱账号登录</a>
                    </li>
                  </ul>
                </div>
                <div class="u-official-terms">
                  <input
                    type="checkbox"
                    class="agree"
                  >同意
                  <a href="#">《服务条款》</a>
                  <a href="#">《隐私政策》</a>
                  <a href="#">《儿童隐私政策》</a>
                </div>
                <div
                  class="dialog"
                  v-show="isShowMes"
                >请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》</div>
              </div>
              <div class="n-scan"></div>
            </div>
            <!---------------------- 手机号登录 -->
            <div
              class="phonetop"
              v-if="phoneLogin && !register"
            >
              <!-- 手机号 -->
              <div class="j-mob">
                <input
                  type="text"
                  placeholder="请输入手机号"
                  v-model="phoneNum"
                >
              </div>
              <!-- 验证码+密码 -->
              <div class="captchaloginwrapper">
                <div class="f-mgt10">
                  <input
                    type="text"
                    placeholder="请输入验证码"
                    class="yanzhengma"
                    v-if="isMess"
                    v-model="verificode"
                    @keyup.enter="checkVeri"
                  >
                  <a
                    href="#"
                    class="send"
                    v-if="isMess"
                    @click.prevent="getVeri"
                  >获取验证码</a>

                  <input
                    type="text"
                    placeholder="请输入密码"
                    class="pas"
                    v-if="!isMess"
                    v-model="password"
                    @keyup.enter="checkVeri2"
                  >
                  <a
                    href="#"
                    class="forget"
                    v-if="!isMess"
                  >忘记密码</a>
                </div>
                <!-- 频繁发送验证码，显示提示：发送验证码间隔过短 -->
                <div
                  class="warn"
                  v-if="isPinFan"
                >
                  <i class="iconfont"></i>
                  <span id="tishimsg">发送验证码间隔过短</span>

                </div>
                <div class="f-mgt10 actionbox">
                  <a
                    href="#"
                    v-if="isMess"
                    @click.prevent="pasLogin"
                  >密码登录</a>
                  <a
                    href="#"
                    v-else
                    @click.prevent="mesLogin"
                  >短信登录</a>
                  <div class="rig">
                    <input
                      class="phonecheck"
                      type="checkbox"
                      checked
                    >
                    自动登录
                  </div>
                </div>
              </div>
              <!-- 登录按钮 -->
              <div class="f-mgt20">
                <a
                  href="#"
                  @click.prevent="checkVeri"
                  v-if="isMess"
                >登录</a>
              </div>
              <div
                class="f-mgt20"
                v-if="!isMess"
              >
                <a
                  href="#"
                  @click.prevent="checkVeri2"
                >登录</a>

              </div>
            </div>
            <div
              class="phonebtm"
              v-if="phoneLogin && !register"
            >
              <a
                href="#"
                class="other"
                @click.prevent="goBack"
              >&lt;&nbsp;&nbsp;其他登录方式</a>
              <a
                href="#"
                class="reg"
                @click.prevent="registerUser"
              >没有帐号？免费注册&nbsp;&nbsp;&gt;></a>
            </div>
            <div
              class="otherbtn"
              v-if="isQr "
            >
              <a
                href="#"
                @click.prevent="chooseOther"
              >选择其他登录模式</a>
            </div>
            <!-- ------------------------------ -->
            <!-- ------------------注册页面------------ -->
            <div
              class="phoneRegs"
              v-if="register"
            >
              <div class="txt">手机号：</div>
              <!-- 手机号 -->
              <div class="j-mob">
                <input
                  type="text"
                  placeholder="请输入手机号"
                  v-model="regPhone"
                >
              </div>
              <div class="txt txt2">密码：</div>
              <!-- 设置密码 -->
              <div class="captchaloginwrapper f-mgt10">
                <input
                  type="text"
                  placeholder="设置登录密码，不少于8位"
                  class="pas"
                  v-model="regPas"
                  @keyup="goExam"
                >
                <div class="msg">
                  <div class="j-err">
                    <i
                      class="man1"
                      v-show="man11"
                    ></i>
                    <i
                      class="man1a"
                      v-show="!man11"
                    ></i>
                    <span>密码不能包含空格</span>
                  </div>
                  <div class="j-err">
                    <i
                      class="man1"
                      v-show="man33"
                    ></i>
                    <i
                      class="man1a"
                      v-show="!man33"
                    ></i>
                    <span>密码长度为8-20位</span>
                  </div>
                  <div class="j-err">
                    <i
                      class="man1"
                      v-show="man22"
                    ></i>
                    <i
                      class="man1a"
                      v-show="!man22"
                    ></i>
                    <span>包含字母、数字、符号中至少两种</span>
                  </div>

                </div>
              </div>
              <!-- 下一步按钮 -->
              <div class="f-mgt20">
                <a href="#">下一步</a>
              </div>
            </div>
            <div
              class="phonebtm"
              v-if="register"
            >
              <a
                href="#"
                class="other"
                @click.prevent="goBack"
              >&lt;&nbsp;&nbsp;返回登录</a>
            </div>
            <!-- ----------------------------------- -->
            <!-- 邮箱登录页面 -->
            <div
              class="phonetop"
              v-if="emailPa"
            >
              <!-- 邮箱号 -->
              <div class="j-mob">
                <input
                  type="email"
                  placeholder="请输入账号"
                  v-model="emailNum"
                >
              </div>
              <!-- 验证码+密码 -->
              <div class="captchaloginwrapper">
                <div class="f-mgt10">
                  <input
                    type="text"
                    placeholder="请输入密码"
                    class="pas"
                    v-model="emailpassword"
                    @keyup.enter="checkEmail"
                  >
                  <a
                    href="#"
                    class="forget"
                  >忘记密码</a>
                </div>

                <div class="f-mgt10 actionbox">
                  <div class="left">
                    <input
                      type="checkbox"
                      checked
                      class="emailcheck"
                    >
                    自动登录
                  </div>

                </div>
              </div>
              <!-- 登录按钮 -->
              <div class="f-mgt20">
                <a
                  href="#"
                  @click.prevent="checkVeri"
                  v-if="isMess"
                >登录</a>
              </div>
              <div
                class="f-mgt20"
                v-if="!isMess"
              >
                <a
                  href="#"
                  @click.prevent="checkVeri2"
                >登录</a>

              </div>
            </div>
            <div
              class="phonebtm"
              v-if="emailPa"
            >
              <a
                href="#"
                class="other"
                @click.prevent="goBack"
              >&lt;&nbsp;&nbsp;其他登录方式</a>
            </div>
            <!-- ------------------------------- -->
          </div>
          <!-- 关闭窗体 -->
          <span
            class="zcls"
            @click="closeDialog"
          >×</span>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import axios from 'axios'
import bus from '../../eventbus.js'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      erCode: '',
      userPas: '',
      userInfo: {
        profile: {
          avatarUrl: ''
        }
      },
      isShowUDia: false,
      msgInfoDate: [],
      // 用户输入的搜索词
      usersr: '',
      // 获取联想数据
      iagineDate: [],
      thetot: [],
      // ------------------------新的
      // hasLogin: false,
      basekey: '',
      baseUrl: '',
      waitConfirm: false,
      waitSaoQr: true,
      isQr: true,
      times: null, // 定时器名称,
      isShowMes: false,
      phoneLogin: false,
      // 短信登录还是密码登录(默认短信)
      isMess: true,
      // 输入的手机号
      phoneNum: '',
      // 输入的验证码
      verificode: '',
      emailNum: '',
      emailpassword: '',
      isPinFan: false,
      password: '',
      register: false,
      // 注册手机号
      regPhone: '',
      // 注册密码
      regPas: '',
      man11: true,
      man22: true,
      man33: true,
      emailPa: false,
      ruleForm: {
        userName: "", //用户名
        password: "" //密码
      },
      loginType: ''
    }
  },
  computed: {
    ...mapState(['loginID', 'hasLogin'])
  },
  mounted () {
    this.getCookie();
  },
  created () {
  },

  methods: {
    ...mapMutations(['setLoginID', 'setHasLogin']),
    // isneedLogin () {
    //   this.getCookie()
    // },
    //设置cookie
    setCookie (c_name, c_pwd, usetype, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "usertype" + "=" + usetype + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "userName") {
            this.phoneNum = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.password = arr2[1];
          } else if (arr2[0] == "usertype") {
            this.loginType = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("", "", "", -1); //修改2值都为空，天数为负1天就好了
    },
    // 退出登录
    exitLogin () {
      // this.clearCookie();
      this.setLoginID('')
      this.setHasLogin(false)
      // this.hasLogin = false
    },
    // 获取用户信息
    async getUserInfo () {
      let resmsg = await axios.get('https://autumnfish.cn//msg/private?limit=30');
      // console.log('-------------------消息------------------')
      // console.log(resmsg)

      let res = await axios.get('https://autumnfish.cn//user/detail?uid=' + this.loginID)
      // console.log(res)
      this.userInfo = res.data

      this.msgInfoDate = resmsg.data.msgs[0];
    },
    goLoginPage () {
      document.getElementsByClassName('login')[0].style.display = 'block'
      this.getQr()
    },
    async getQr () {
      var res = await axios.get('https://autumnfish.cn//login/qr/key',
        {
          params: {
            timerstamp: new Date().getTime()
          }
        })
      // console.log(res)
      var key = res.data.data.unikey
      this.basekey = key
      var reser = await axios.get('https://autumnfish.cn//login/qr/create',
        {
          params: {
            key: key,
            qrimg: 1,
            timerstamp: new Date().getTime()
          }

        })
      this.baseUrl = reser.data.data.qrimg
      this.qrCheck(new Date().getTime())
    },
    // 轮询判断扫码状态
    async qrCheck (t) {
      this.times = setInterval(async () => {
        var res = await axios.get('https://autumnfish.cn//login/qr/check',
          {
            params: {
              key: this.basekey,
              timerstamp: new Date().getTime()
            }

          }
        )
        // 判断返回值中的code
        if (res.data.code === 800) {
          console.log('二维码过期')
          clearInterval(this.times)
          document.getElementsByClassName('info')[0].style.display = 'block'
        } else if (res.data.code === 801) {
          console.log('等待扫码')
          this.waitSaoQr = true
        } else if (res.data.code === 802) {
          console.log('等待确认')
          this.waitSaoQr = false
          this.waitConfirm = true
        } else if (res.data.code === 803) {
          // 用户登录成功后清除定时器
          console.log('扫码完成，登录成功')
          console.log(res)
          clearInterval(this.times)
          // 关闭窗体
          this.closeDialog()
          // ---------------------问题：怎样获取用户ID？？
          this.setHasLogin(true)
          // this.hasLogin = true
        }
      }, 5000)
    },
    // 点击选择其他方式登录
    chooseOther () {
      clearInterval(this.times)
      this.isQr = false
    },
    // 手机号登录
    goPhoneLogin () {
      // 1、判断是否勾选协议
      var isAgree = document.getElementsByClassName('agree')[0].checked
      if (isAgree) {
        // 跳转
        this.phoneLogin = true
      } else {
        // 提示
        this.isShowMes = true
        setTimeout(() => {
          this.isShowMes = false
        }, 1000)
      }
    },
    // 手机登录————密码登录
    pasLogin () {
      this.isMess = false
      if (document.cookie.length > 0 && document.cookie.usertype === 'phone') {

        this.checkVeri2()
      }
    },
    // 手机登录————短信登录
    mesLogin () {
      this.isMess = true
    },
    // 获取验证码
    async getVeri () {
      var res = await axios.get('https://autumnfish.cn//captcha/sent?phone=' + this.phoneNum)
      console.log(res)
    },
    // 校验验证码是否正确
    async checkVeri () {
      var res = await axios.get('https://autumnfish.cn//captcha/verify?phone=' + this.phoneNum + '&captcha=' + this.verificode)
      // 存在的问题：输入错误的验证码时报错503
      // console.log(res)
      if (res.data.data === true) {
        console.log('登录成功')
        // 关闭窗体
        this.closeDialog()

        // this.hasLogin = true
        this.setHasLogin(true)
        // 更新ID
        // this.setLoginID()
      }
    },
    // 校验密码是否正确
    async checkVeri2 () {
      var res = await axios.get('https://autumnfish.cn//login/cellphone?phone=' + this.phoneNum + '&password=' + this.password)
      // console.log(res)
      if (res.data.code === 502) {
        this.isPinFan = true
        // 手机号或密码错误
        // document.getElementById('tishimsg').innerText = res.data.msg
      } else if (res.data.code === 400) {
        // 请输入正确的手机号
        this.isPinFan = true
        // document.getElementById('tishimsg').innerText = '请输入正确的手机号'
      } else if (res.data.code === 200) {
        this.isPinFan = false
        // 关闭窗体
        this.closeDialog()
        //判断复选框是否被勾选 勾选则调用配置cookie方法
        if (document.getElementsByClassName('phonecheck')[0].checked === true) {
          // console.log('-------------------传入cookie')
          //传入账号名，密码，和保存天数3个参数
          this.setCookie(this.phoneNum, this.password, "phone", 7);
        } else {
          this.clearCookie()
        }
        // 保存登录用户ID
        this.setLoginID(res.data.account.id)
        // this.hasLogin = true
        this.setHasLogin(true)
        this.getUserInfo()
        // this.loginID = 
      }
    },
    // 校验邮箱密码是否正确
    async checkEmail () {
      var res = await axios.get('https://autumnfish.cn//login?email=' + this.emailNum + '&password=' + this.emailpassword)
      // console.log(res)
      if (res.data.code === 502) {
        console.log('账号或密码错误')
        // 账号或密码错误
      } else if (res.data.code === 200) {
        //判断复选框是否被勾选 勾选则调用配置cookie方法
        if (document.getElementsByClassName('emailcheck')[0].checked === true) {
          //传入账号名，密码，和保存天数3个参数
          this.setCookie(this.emailNum, this.emailpassword, "email", 7);
        }
        // 保存登录用户ID
        // this.hasLogin = true
        this.setHasLogin(true)
        this.setLoginID(res.data.account.id)
        this.getUserInfo()
        // this.loginID = 
      }
    },
    // 其他方式登录
    goBack () {
      this.register = false
      this.phoneLogin = false
      this.emailPa = false
    },
    registerUser2 () {
      var isAgree = document.getElementsByClassName('agree')[0].checked
      if (isAgree) {
        // 跳转
        // this.phoneLogin = false
        this.register = true
      } else {
        // 提示
        this.isShowMes = true
        setTimeout(() => {
          this.isShowMes = false
        }, 1000)
      }
    },
    registerUser () {
      // this.phoneLogin = false
      this.register = true
    },
    // 检验注册密码是否符合规范
    goExam () {
      // 是否包含空格
      if (this.regPas.length !== this.regPas.trim().length) {
        // console.log('密码不能包含空格')
        this.man11 = true
      } else {
        this.man11 = false
      }
      // 验证长度
      if (this.regPas.length < 8) {
        // console.log('密码长度必须为8位以上！')
        this.man22 = true
      } else {
        this.man22 = false
      }
      // 验证字母、数字、特殊符号两种或以上组成
      var passwordreg = /((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))(?!^.*[\u4E00-\u9FA5].*$)/
      if (!passwordreg.test(this.regPas)) {
        // console.log('包含字母、数字或特殊字符至少两种')
        this.man33 = true
      } else {
        this.man33 = false
      }
    },
    // 微信登录
    weChatLogin (index) {
      var isAgree = document.getElementsByClassName('agree')[0].checked
      if (isAgree) {
        // 跳转
        if (index === 1) {
          document.getElementsByClassName('wechata')[0].href = 'https://music.163.com/api/sns/authorize?snsType=10&clientType=web2&callbackType=Login&forcelogin=true'
          document.getElementsByClassName('wechata')[0].target = '_new'
        } else if (index === 2) {
          document.getElementsByClassName('wechata')[1].href = 'https://music.163.com/api/sns/authorize?snsType=5&clientType=web2&callbackType=Login&forcelogin=true'
          document.getElementsByClassName('wechata')[1].target = '_new'
        } else if (index === 3) {
          document.getElementsByClassName('wechata')[2].href = 'https://music.163.com/api/sns/authorize?snsType=2&clientType=web2&callbackType=Login&forcelogin=true'
          document.getElementsByClassName('wechata')[2].target = '_new'
        }
      } else {
        // 提示
        this.isShowMes = true
        setTimeout(() => {
          this.isShowMes = false
        }, 1000)
      }
    },
    // 邮箱登录
    emailLogin () {
      this.emailPa = true
      if (document.cookie.length > 0 && document.cookie.usertype === 'email') {
        this.checkEmail()
      }
    },
    // 关闭窗体
    closeDialog () {
      document.getElementsByClassName('login')[0].style.display = 'none'
      // 清除定时器
      clearInterval(this.times)
    },
    // ----------------------上面是新的-----
    hideImagine () {
      document.getElementsByClassName('lstlay')[0].style.display = 'none'
    },
    showImagine () {
      document.getElementsByClassName('lstlay')[0].style.display = 'block'
    },
    tiaoresult () {
      //入口
      this.$router.push({ path: '/search', query: { srkey: this.usersr } })
      this.hideImagine()
    },
    // 用户开始输入，获取联想数据
    async getImagine () {
      if (this.usersr !== '') {
        // 显示块
        document.getElementsByClassName('lstlay')[0].style.display = 'block'
        let imagine = await axios.get('https://autumnfish.cn//search/suggest?keywords=' + this.usersr);
        // console.log(imagine)
        this.iagineDate = imagine.data.result
        // console.log(this.iagineDate)
        this.thetot = imagine.data.result.order
      }
      else {
        // 隐藏块
        document.getElementsByClassName('lstlay')[0].style.display = 'none'
        // this.thetot = []
      }

    },
    // 鼠标进入头像框
    showDia () {
      this.isShowUDia = true;
    },
    // 鼠标出去头像框
    hideDia () {
      this.isShowUDia = false;
    },

    // 点击“我的主页”——跳转到我的主页
    gouserhome () {
      // id = 
      // console.log('点击了我的主页按钮，ID：', this.loginID)
      this.$router.push({ path: '/user/home', query: { id: this.loginID } })
      // this.$router.push({ name: 'userhome', params: { id: this.userId } })
    },
    gomsghome () {
      this.$router.push({ path: '/msg', params: { id: this.loginID } })
    },
    goMyLevel () {
      this.$router.push({ path: '/level', params: { id: this.loginID } })
    },
    goDetail (id, main) {
      // console.log(id, main)
      if (main === 'songs') {
        this.$router.push({ path: '/song', query: { id: id } })
      }
      else if (main === 'artists') {
        this.$router.push({ path: '/artist', query: { id: id } })
      }
      else if (main === 'albums') {
        this.$router.push({ path: '/album', query: { id: id } })
      }
      else {
        this.$router.push({ path: '/playlist', query: { id: id } })
      }
      this.hideImagine()
    }
  }
}
</script>


<style lang="less" scoped>
.topBar {
  //  position: fixed;
  // top: 0px;
  // left: 0;
  // right: 0;
  // width: 100%;
  // height: 70px;
  // z-index: 999999;
  background-color: #242424;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  // position: relative;
  .logo {
    padding-right: 20px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    .tozhu {
      text-decoration: none;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .jingling {
        display: inline-block;
        width: 35px;
        height: 35px;
        background-image: url(../../assets/image/jingling.png);
        background-position: 1px -17px;
        margin-top: 2px;
        margin-right: 5px;
      }
      span {
        // line-height: 42px;
        display: inline-block;
        font-size: 25px;
        font-family: FangSong, Helvetica, sans-serif;
        // margin-bottom: 7px;
      }
    }
  }
  .thenavul {
    margin: 0;
    padding: 0;
    // display: flex;
    li {
      list-style: none;
      float: left;
      padding: 0 19px;
      position: relative;
      a {
        display: inline-block;
        widows: 100%;
        height: 70px;
        line-height: 70px;
        text-decoration: none;
        color: #ccc;
        font-size: 14px;
      }
      .jinglingHot {
        position: absolute;
        left: 95px;
        top: 16px;
        display: inline-block;
        width: 28px;
        height: 15px;
        background-image: url(../../assets/image/jingling.png);
        background-position: -431px 2px;
      }
    }
    li:hover {
      background-color: #000000;
      color: #fff;
    }
  }
  .right {
    margin-left: 20px;
    // line-height: 42px;
    display: flex;
    align-items: center;
    position: relative;
    .lstlay {
      width: 240px;
      clear: both;
      position: absolute;
      z-index: 1200000;
      left: 0;
      top: 45px;
      box-sizing: border-box;
      border: 1px solid #bebebe;
      border-radius: 4px;
      background: #fff;
      box-shadow: 0 4px 7px #555;
      text-shadow: 0 1px 0 rgb(255 255 255 / 90%);
      display: none;
      .note {
        margin: 0;
        height: 17px;
        padding: 11px 10px;
        border-bottom: 1px solid #e2e2e2;
        color: #666;
        a {
          text-decoration: none;
          font-size: 12px;
          color: #666;
        }
        a:hover {
          background: #e3e5e7;
        }
      }
      .rap {
        overflow: hidden;
        .itm {
          display: flex;
          justify-content: left;
          .hd {
            width: 53px;
            padding: 10px 0 0 10px;
            padding-top: 9px;
            margin: 0;
            border-right: 1px solid #e2e2e2;
            font-size: 12px;
            color: #333;
            line-height: 19px;
            font-weight: normal;
            i {
              margin: 2px 4px 0 0;
            }
          }
          .f-cb {
            width: 72%;
            height: 100%;
            margin-top: -1px;
            padding: 6px 0 5px;
            border-top: 1px solid #e2e2e2;
            border-left: 1px solid #e2e2e2;
            margin: 0;
            li {
              width: 100%;
              list-style: none;
              a {
                width: 100%;
                text-decoration: none;
                font-size: 12px;
                display: block;
                color: #000;
                text-indent: 12px;
                line-height: 24px;
                // 超出显示...
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-wrap: normal;
              }
            }
            li:hover {
              background-color: #e3e5e7;
            }
          }
          .two,
          .four {
            background-color: #f9f8f8;
          }
        }
      }
    }
    input {
      border: none;
      outline: none;
      font-size: 12px;
      width: 108px;
      height: 22px;
      border-radius: 20px;
      border: none;
      margin-right: 10px;
      padding: 5px 20px;
      background-image: url(../../assets/image/jingling.png);
      background-position: -5px 115px;
    }
    a {
      text-decoration: none;
      color: #ccc;
    }
    .creater {
      font-size: 12px;
      display: inline-block;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      margin-right: 15px;
      border: 1px solid #4f4f4f;
      border-radius: 20px;
    }
    .login2q {
      color: #787878;
      font-size: 12px;
    }
    .haslogina {
      .itemas {
        margin-top: 10px;
        margin-right: 40px;
        .el-avatar {
          width: 30px;
          height: 30px;
          border-radius: 30px;
        }
      }
    }
    .login {
      width: 530px;
      height: 372px;
      position: fixed;
      top: 50%;
      left: 50%;
      margin-left: -265px;
      margin-top: -186px;
      border: 1px solid #000;
      display: none;
      background-color: #fff;
      z-index: 9999;
      .topBar {
        border-bottom: 1px solid #191919;
        border-radius: 4px 4px 0 0;
        background: #2d2d2d;
        // padding-right: 45px;
        margin: 0;
        height: 38px;
        line-height: 38px;
        // padding-left: 18px;
        border-radius: 3px 3px 0 0;
        font-weight: bold;
        font-size: 14px;
        color: #fff;
      }
      .cnt {
        margin: 0 auto;
        padding: 38px 0 20px;
        text-align: center;
        .main {
          display: flex;
          // display: none;
          .phone {
            margin-left: 101px;
            width: 125px;
            height: 220px;
            background: url(../../assets/image/qr_guide.png);
            background-size: contain;
          }
          .right {
            margin-left: 25px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .title {
              font-size: 15px;
              font-weight: 500;
            }
            .qr {
              width: 130px;
              height: 130px;
              padding: 4px;
              margin: 13px auto;
              position: relative;
              .pic {
                width: 130px;
                height: 130px;
              }
              .info {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background: rgba(255, 255, 255, 0.9);
                display: none;
                p {
                  text-align: center;
                  font-size: 12px;
                }
                a {
                  display: block;
                  margin: 0 auto;
                  padding-right: 0;
                  width: 64px;
                  height: 24px;
                  line-height: 24px;
                  text-align: center;
                  border-radius: 4px;
                  background: linear-gradient(180deg, #81dd81 0%, #55a055 100%);
                  border: 1px solid #5baf5b;
                  box-shadow: inset 0 -1px 1px 1px rgb(185 230 185 / 31%);
                  color: #fff;
                  font-size: 12px;
                }
              }
            }
            .txt {
              font-size: 12px;
            }
          }
        }
        // -----------等待手机端确认
        .suc {
          .suc-pic {
            width: 140px;
            height: 140px;
            background-image: url(../../assets/image/scan_success.png);
            background-size: contain;
            margin: 0 auto;
          }
          .suc-text {
            margin-top: 12px;
            font-size: 18px;
            font-weight: 450;
            line-height: 24px;
            color: rgba(0, 0, 0, 0.8);
          }
        }
        .confirm {
          margin-top: 4px;
          margin-bottom: 30px;
          font-size: 14px;
          color: #333;
        }
        // ------------其他方式登录
        .other {
          min-height: 295px;
          position: relative;
          .n-log2 {
            // display: flex;
            position: relative;
            .u-main {
              float: left;
              width: 224px;
              padding: 0 35px 3px 40px;
              border-right: 1px dotted #ccc;
              .u-plt {
                height: 120px;
                background: url(../../assets/image/platform.png) no-repeat 13px
                  0;
              }
              .f-mgt10 {
                margin-top: 10px;
                a {
                  display: inline-block;
                  width: 219px;
                  height: 31px;
                  line-height: 31px;
                  color: #fff;
                  // background-color: #2b7cc9;
                  background: linear-gradient(#4b9edf, #2b7cc9);
                  text-decoration: none;
                  font-size: 12px;
                  border-radius: 4px;
                }
              }
            }
            .u-alt {
              float: left;
              padding: 3px 0 3px 39px;
              margin-top: -15px;
              font-size: 12px;
              color: #333;
              font-family: Arial, Helvetica, sans-serif;
              ul {
                padding: 0;
                margin: 0;
                li {
                  margin-top: 15px;
                  list-style: none;
                  a {
                    text-decoration: none;
                    font-size: 12px;
                    color: #333;
                    cursor: pointer;
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    .iconfont {
                      display: inline-block;
                      margin-right: 14px;
                      width: 38px;
                      height: 38px;
                      background: url(../../assets/image/logo1.png) no-repeat 0
                        9999px;
                      background-position: -150px -670px;
                    }
                    .icon2 {
                      background-position: -190px -670px;
                    }
                    .icon3 {
                      background-position: -231px -670px;
                    }
                    .icon4 {
                      background-position: -271px -670px;
                    }
                  }
                }
                li:hover {
                  a {
                    text-decoration: underline;
                  }
                }
              }
            }
            .u-official-terms {
              float: left;
              white-space: nowrap;
              margin-left: 40px;
              margin-top: 30px;
              font-family: NotoSansHans-Regular;
              font-size: 10px;
              color: rgba(0, 0, 0, 0.4);
              line-height: 15px;
              .agree {
                margin: 0;
                padding: 0;
                font-size: 12px;
                color: #333;
              }
              a {
                font-size: 12px;
                color: #507daf;
              }
            }
            .dialog {
              position: absolute;
              bottom: -231px;
              left: 26px;
              font-size: 12px;
              padding: 10px 20px;
              color: #fff;
              background-color: rgba(0, 0, 0, 0.5);
              // display: none;
            }
          }
          // 右下角二维码
          .n-scan {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 52px;
            height: 52px;
            background-image: url(../../assets/image/qr_login_icon.png);
            background-size: contain;
            cursor: pointer;
          }
        }
        // --------手机登录页面
        .phonetop {
          padding: 35px 0 58px;
          width: 220px;
          margin: 0 auto;
          .j-mob {
            height: 30px;
            margin: 0;
            border: 1px solid #cdcdcd;
            border-radius: 2px;
            input {
              display: block;
              padding: 5px 8px 5px;
              height: 20px;
              line-height: 20px;
              border: none;
              width: 202px;
              box-sizing: content-box;
            }
          }
          .captchaloginwrapper {
            .f-mgt10 {
              margin-top: 10px;
              height: 32px;
              position: relative;
              .yanzhengma {
                display: block;
                height: 20px;
                margin: 0;
                padding: 5px 6px 6px;
                line-height: 20px;
                width: 122px;
                box-sizing: content-box;
                border: 1px solid #cdcdcd;
                border-radius: 2px;
                float: left;
              }
              .send {
                float: right;
                display: inline-block;
                font-size: 12px;
                color: #333;
                width: 70px;
                height: 31px;
                line-height: 31px;
                text-decoration: none;
                padding: 0 5px 0 0;
                background-color: #f2f2f2;
                border: 1px solid #999;
              }
              .pas {
                display: block;
                margin: 0;
                padding: 5px 6px 6px;
                box-sizing: content-box;
                border: 1px solid #cdcdcd;
                border-radius: 2px;
                padding-right: 66px;
                box-sizing: border-box;
                width: 220px !important;
                height: 32px;
              }
              .forget {
                font-size: 12px;
                color: #666;
                text-decoration: none;
                padding: 0 5px 0 0;
                position: absolute;
                right: 0;
                top: 7px;
              }
            }
            .actionbox {
              // display: flex;
              // justify-content: space-around;
              // align-items: center;
              height: 16px;

              a {
                color: #666;
                font-size: 12px;
                text-decoration: none;
                float: left;
              }
              .left {
                float: left;
                color: #666;
                font-size: 12px;
                input {
                  margin: 0 12px 0 0;
                  vertical-align: middle;
                }
              }
              .rig {
                float: right;
                color: #666;
                font-size: 12px;
                input {
                  margin: 0 12px 0 0;
                  vertical-align: middle;
                }
              }
            }
            .warn {
              margin-top: 5px;
              color: #e33232;
              font-size: 12px;
              // float: left;
              .iconfont {
                margin-right: 8px;
                display: inline-block;
                width: 14px;
                height: 14px;
                background-image: url(../../assets/image/icon.png);
                background-position: -50px -270px;
              }
            }
          }
          .f-mgt20 {
            margin-top: 20px;
            a {
              display: inline-block;
              height: 31px;
              line-height: 31px;
              width: 215px;
              text-align: center;
              color: #fff;
              background-color: #3f8ed8;
              text-decoration: none;
              border-radius: 3px;
              font-size: 12px;
            }
          }
        }
        // --------手机注册页面
        .phoneRegs {
          // padding: 35px 0 65px;
          width: 220px;
          margin: 0 auto;
          position: relative;
          .txt {
            font-size: 12px;
            color: #666;
            position: absolute;
            left: 0;
            top: -18px;
          }
          .txt2 {
            position: absolute;
            left: 0;
            top: 44px;
          }
          .j-mob {
            height: 30px;
            margin: 0;
            border: 1px solid #cdcdcd;
            border-radius: 2px;
            input {
              display: block;
              padding: 5px 8px 5px;
              height: 20px;
              line-height: 20px;
              border: none;
              width: 202px;
              box-sizing: content-box;
            }
          }
          .captchaloginwrapper {
            margin-top: 30px;
            // height: 32px;
            position: relative;
            .pas {
              display: block;
              margin: 0;
              padding: 5px 6px 6px;
              box-sizing: content-box;
              border: 1px solid #cdcdcd;
              border-radius: 2px;
              box-sizing: border-box;
              width: 220px !important;
              height: 32px;
            }
            .msg {
              display: flex;
              justify-content: left;
              flex-direction: column;
              align-items: flex-start;
              .j-err {
                color: #333;
                margin-top: 5px;
                .man1 {
                  margin-top: -2px;
                  margin-right: 8px;
                  width: 14px;
                  height: 14px;
                  display: inline-block;
                  background-image: url(../../assets/image/icon.png);
                  background-position: -50px -270px;
                }
                .man1a {
                  margin-top: -2px;
                  margin-right: 8px;
                  width: 14px;
                  height: 14px;
                  display: inline-block;
                  background-image: url(../../assets/image/pic1.png);
                }
                span {
                  font-size: 12px;
                }
              }
            }
          }
          .f-mgt20 {
            margin-top: 20px;
            a {
              display: inline-block;
              height: 31px;
              line-height: 31px;
              width: 215px;
              text-align: center;
              color: #fff;
              background-color: #3f8ed8;
              text-decoration: none;
              border-radius: 3px;
              font-size: 12px;
            }
          }
        }
        .phonebtm {
          padding: 0 19px;
          height: 48px;
          border-top: 1px solid #c6c6c6;
          border-radius: 0 0 4px 4px;
          line-height: 48px;
          background-color: #f7f7f7;
          a {
            font-size: 12px;
            text-decoration: none;
          }
          .other {
            color: #0c72c3;
            float: left;
          }
        }
        // 其他方式按钮
        .otherbtn {
          height: 28px;
          a {
            text-decoration: none;
            display: block;
            width: 118px;
            height: 100%;
            margin: 20px auto 0;
            padding-right: 0;
            font-size: 12px;
            border: 1px solid #979797;
            border-radius: 15px;
            line-height: 28px;
            text-align: center;
            color: rgba(0, 0, 0, 0.8);
          }
        }
      }
      .zcls {
        position: absolute;
        top: 8px;
        right: 20px;
        width: 10px;
        height: 10px;
        color: #fff;
        cursor: pointer;
      }
    }
    .m-tlist {
      position: absolute;
      top: 43px;
      right: -35px;
      width: 158px;
      background: #2b2b2b;
      border: 1px solid #202020;
      box-shadow: 0 8px 24px 0 rgb(0 0 0 / 50%);
      border-radius: 4px;
      z-index: 10000;
      // display: none;
      ul {
        padding: 0;
        margin: 0;
        li {
          list-style: none;
          a {
            text-decoration: none;
            height: 34px;
            line-height: 34px;
            overflow: hidden;
            font-size: 12px;
            position: relative;
            .iconfont {
              margin: 7px 10px 0 0;
              font-size: 17px;
              padding-left: 24px;
              color: #888;
            }
            span {
              color: #ccc;
            }
            // 消息数
            .m-topmsg {
              display: inline-block;
              min-width: 17px;
              height: 17px;
              padding: 0 4px;
              box-sizing: border-box;
              background: #c20c0c;
              border-radius: 18px;
              border: 1px solid #242424;
              line-height: 17px;
              font-size: 12px;
              white-space: nowrap;
              color: #fff;
              text-align: center;
              position: absolute;
              top: 0;
              left: 110px;
            }
          }
        }
        li:hover {
          color: #fff;
          background: #353535;
        }
      }
    }
  }
}
</style>
